<template>
    <div class="multiplication" v-if="question">
        <div class="timeout">{{timeout}}秒</div>
        <div class="question">
        <div class="title">{{question.a}}<span class="symbol">×</span>{{question.b}}</div>
        <div class="equals">=</div>
        <div class="answer">{{ timeout==0 ? question.r:'' }}</div>
        </div>
    </div>  
  </template>
  
  <script>
  export default {
    name: 'MultiplicationPage',
    data(){
      return {
        question: {},
        timeout: 60,
        interval: null
      }
    },
    mounted(){
      this.next();
    },
    methods:{
      next(){
        this.question = this.generate();
      },
      number(){
        return Math.floor(Math.random() * 9) + 1;
      },
      generate(){
        let a = this.number();
        let b = this.number();
        let r = a * b;

        if(a > b){
          let t = a;
          a = b;
          b = t;
        }
        
        if(this.interval){
          clearInterval(this.interval);
          
        }
        this.timeout = 3;
        this.interval = setInterval(()=> {
          this.timeout --;
          if(this.timeout == 0){
            clearInterval(this.interval);
            setTimeout(()=>{
              this.next();
            }, 1000);
          }
        }, 1000)
        return {
          a, b, r
        }
      }
    }
   
  }
  </script>
  
  <style scoped>
    .multiplication{
      background: rgb(4, 76, 64);
      width: 100%;
      min-height: 100%;
      box-sizing: border-box;
      padding-top:80px;
      padding-bottom: 40px;
      font-size: 300px;
      font-weight: bold;
      text-align: center;
      font-family:'Courier New', Courier, monospace;
    }
  
    .timeout{
      font-size: 100px;
      color: brown;
    }
    .question{
      display: flex;
      align-items:center;
      justify-content: center;
      color: #FFFFFF;
      
    }
    .symbol{
      color: chartreuse;
    }
    .equals{
      margin:0 40px;
      color: chartreuse;
    }
    .answer{
      color:chocolate;
      border: 20px solid #000000;
      width: 400px;
      height: 360px;
      line-height: 360px;
  
    }
    
  </style>
  